import React from 'react';
import './index.css'
import {connect} from 'react-redux';
import {getSongList} from '../../store/songList.redux'

@connect(
  state=>({
    songList:state.songList.songList,
    topInfo:state.songList.topInfo,
    totalSongNum:state.songList.totalSongNum,
    updateTime:state.songList.updateTime
  }),{
    getSongList,
    setList(list){
      return {type:'player_list',list}
    }
  }
)
class SongList extends React.Component{
  constructor(props){
    super(props);
    this.state={}
  }
  componentDidMount(){
    const id = this.props.match.params.id
    this.props.getSongList(id);
  }
  componentDidUpdate(){
    this.props.setList(this.props.songList);
  }
  render(){
    return (
      <div className="songList">
      <div className="songListBox">
        <div className="loging"></div>
        <div className="headbox headbox2">
          <p className="p1">
            <img src="http://y.gtimg.cn/mediastyle/mod/mobile/img/logo_ch.svg?max_age=2592000" alt="" />
          </p>
          <p className="p2">
            <span>戳我查看</span>
          </p>
        </div>
        <div className="songInfoBox">
          <div className="songInfo">
            <p className="song_pic">
              <img src={this.props.topInfo.picAlbum} alt=""/>
            </p>
            <h2 className="song_title">{this.props.topInfo.listName}</h2>
            <h3 className="song_number">{this.props.topInfo.listName} 第170天</h3>
            <h3 className="song_time">更新时间: {this.props.updateTime}</h3>
            <span className="iconfont icon-you song_play"></span>
          </div>
          <div className="songList">
            <p className="songList_num">
              排行榜
              <span>共{this.props.totalSongNum}首</span>
            </p>
            <ul>
              {
                this.props.songList.map((song,index)=>(
                  <li key={song.songMid} onClick={()=>this.props.history.push(`/player/${song.songMid}/${song.songId}`)}>
                    <p className="songlist_index songlist_num3">{index+1}</p>
                      <div className="songlist_name">
                        <p className="song_name">{song.songName}</p>
                        <p className="singer_name">
                          {
                            song.singer.map(s=>(
                              <span key={s.singerMid}>
                                {s.singerName}
                              </span>
                            ))
                          }
                        </p>
                      </div>
                    <p className="iconfont icon-download songList_xiazai"></p>
                  </li>
                ))
              }
            </ul>
          </div>
        </div>
      </div>
    </div>
    )
  }
}

export default SongList;